import React, { Component } from 'react'
import { Dropdown, Layout } from 'element-react'
import { Link, withRouter } from 'react-router-dom'

class App extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      language: [
        {
          name: '中文',
          value: 'cn'
        },
        {
          name: 'English',
          value: 'en'
        },
        {
          name: 'ภาษาไทย',
          value: 'thai'
        }
      ]
    }
  }
  // 退出登录
  loginOut () {
    this.props.history.push({
      pathname: '/discount',
      state: { fromDashboard: true }
    })
  }
  // 语言切换
  changeLanguage (command) {
    window.localStorage.thishopLanguage = command
    this.props.history.go(0)
  }
  render() {
    return (
      <div className="Topbar">
        <span className="el-col-18" onClick={this.loginOut.bind(this)}>Thishop商城后台管理系统</span>
        <Layout.Col span="3">
          <Dropdown trigger="click" menu={(
            <Dropdown.Menu>
              <Link to="/changePwd"><Dropdown.Item>修改密码</Dropdown.Item></Link>
              <Link to="/loginout"><Dropdown.Item>退出登录</Dropdown.Item></Link>
            </Dropdown.Menu>
          )}>
            <span className="el-dropdown-link">
              suporka <i className="el-icon-caret-bottom el-icon--right"></i>
            </span>
          </Dropdown>
        </Layout.Col>
        <Layout.Col span="3">
          <Dropdown trigger="click" menu={(
            <Dropdown.Menu>
              {this.state.language.map((item, index) => {
                return <Dropdown.Item key={index}>{item.name}</Dropdown.Item>
              })}
            </Dropdown.Menu>
          )} onCommand={this.changeLanguage.bind(this)}>
            <span className="el-dropdown-link">
              选择语言 <i className="el-icon-caret-bottom el-icon--right"></i>
            </span>
          </Dropdown>
        </Layout.Col>
      </div>
    );
  }
}

export default withRouter(App)
